﻿@namespace MudBlazor.Docs.Examples

<MudPaper Class="doc-section-component-container">
    <MudChart ChartType="ChartType.Line" ChartSeries="@_series" @bind-SelectedIndex="_index" XAxisLabels="@_xAxisLabels" Width="@_width" Height="@_height" ChartOptions="@_options" AxisChartOptions="_axisChartOptions" />
</MudPaper>

<MudGrid>
    <MudItem md="6" xs="12">
        <MudText Typo="Typo.body1" Class="py-3">Selected: @(_index < 0 ? "None" : _series[_index].Name)</MudText>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudTextField @bind-Value="_width" Label="Chart Width"></MudTextField>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox @bind-Value="_axisChartOptions.MatchBoundsToSize" Label="MatchBoundsToSize"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudTextField @bind-Value="_height" Label="Chart Height"></MudTextField>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox T="bool" ValueChanged="(v)=> _series[0].LineDisplayType = v ? LineDisplayType.Area : LineDisplayType.Line" Label="Fossil as Area"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudSlider @bind-Value="_options.LineStrokeWidth" Min="1" Max="10">Line Width: @_options.LineStrokeWidth.ToString()</MudSlider>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox T="bool" ValueChanged="(v)=> _series[1].LineDisplayType = v ? LineDisplayType.Area : LineDisplayType.Line" Label="Renewable as Area"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudStack>
            <MudText Typo="Typo.body1">XAxis Label Rotation</MudText>
            <MudSlider @bind-Value="_axisChartOptions.XAxisLabelRotation" Min="0" Max="90" Step="15"></MudSlider>
        </MudStack>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox T="bool" ValueChanged="(v)=> _series.ForEach(x => x.ShowDataMarkers = v)" Label="Show Data Markers"></MudCheckBox>
    </MudItem>
</MudGrid>

@code {
    private int _index = -1; //default value cannot be 0 -> first selectedindex is 0.
    private ChartOptions _options = new ChartOptions();
    private AxisChartOptions _axisChartOptions = new AxisChartOptions();
    private string _width = "650px";
    private string _height = "350px";

    private List<ChartSeries> _series = new List<ChartSeries>()
    {
        new ChartSeries() { Name = "Fossil", Data = new double[] { 90, 79, 72, 69, 62, 62, 55, 65, 70 } },
        new ChartSeries() { Name = "Renewable", Data = new double[] { 10, 41, 35, 51, 49, 62, 69, 91, 148 } },
    };
    private string[] _xAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" };
}
